<template>
	<view class="content">
		<sl-filter :ref="'slFilter'" :topFixed="true" :isTransNav="true" :navHeight="0" :color="titleColor" :themeColor="themeColor" :menuList="menuList"
		 @result="result"></sl-filter>
		<view class="ask_questions" @click="navToDetailPage({type:'ask_editor'},'/pages/ask/ask_editor')">我要提问</view>
		<view class="ask_search" @click="navToDetailPage({},'/pages/search/search')"><text class="iconfont icon-sousuo1"></text></view>
		<view class="asklist m-t5">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in askList"  :key="index" @click="navToDetailPage(item,'/pages/ask/show')">
					<view class="uni-media-list">
						<view class="uni-media-list-logo" v-if="item.thumb">
							<image :src="item.thumb" mode="aspectFill"></image>
						</view>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top uni-ellipsis">{{item.title}}</view>
							<!-- <text v-text="cutText(item)"></text> -->
							<view class="uni-media-list-text-bottom u-line-3">
								{{item.desc || ''}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			slFilter,
			uniLoadMore
		},
		data() {
			return {
				themeColor: '#000000',
				titleColor: '#666666',
				menuList: [{
						'title': '全部',
						'isSort': true,
						'key': 'subject',
						'detailList': []
					}
				],
				loadingType: 'more', //加载更多状态
				askList: [],
				category_id: '',
				page: 1,
			}
		},
		onLoad(options){
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
			// #endif
			// this.cateId = options.tid;
			
		},
		onShow() {
			this.initData();
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.page = 1;
			this.loadData('refresh');
		},
		//加载更多
		onReachBottom(){
			if(this.loadingType === 'nomore'){
				return;
			}
			if(this.loadingType === 'loading'){
				return;
			}
			this.page++;
			this.loadData();
		},
		
		methods: {
			cutText(item){
				if(item && item.desc){
					return item.desc.substring(0,25);
				}else{
					return '';
				}
			},
			async initData(){
				await this.getMenus();
				await this.loadData();
			},
			async getMenus(){
				await this.$http.post('api/common/category').then(res=>{
					if(res.code === this.sucCode){
						let list = res.data || [];
						if(list.length > 0){
							list = list.map((item)=>{
								let obj = {};
								obj.title = item.title;
								obj.value = item.id;
								return obj;
							});
							
							this.menuList[0].detailList = list;
							
						}
						
						
					}else{
						this.$mHelper.toast(res.msg);
					}
					
				}).catch(err=>{
					console.log(err);
				});
			},
			
			//加载，带下拉刷新和上滑加载
			async loadData(type='add', loading) {
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						return;
					}
					this.loadingType = 'loading';
				}else{
					this.loadingType = 'more'
				}
				
		
				let params = {};
				params.page = this.page;
				params.pagesize = 10;
				if(this.category_id){
					params.category_id = this.category_id;
				}
				
				await this.$http.post('api/article/index',params).then(res=>{
					if(res.code === this.sucCode){
						let askList = res.data.list || [];
						if(type === 'refresh'){
							this.askList = [];
						}
						this.askList = this.askList.concat(askList);
						
						//判断是否还有下一页，有是more  没有是nomore
						this.loadingType  = askList.length < params.pagesize ? 'nomore' : 'more';
						if(type === 'refresh'){
							if(loading == 1){
								uni.hideLoading()
							}else{
								uni.stopPullDownRefresh();
							}
						}
					}else{
						this.$mHelper.toast(res.msg);
					}
					
				}).catch(err=>{
					console.log(err);
				});
				
			},
			/* //加载，带下拉刷新和上滑加载
			async loadData(type='add', loading) {
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						return;
					}
					this.loadingType = 'loading';
				}else{
					this.loadingType = 'more'
				}
				
				let askList = await this.$api.json('askList');
				if(type === 'refresh'){
					this.askList = [];
				}
				this.askList = this.askList.concat(askList);
				
				//判断是否还有下一页，有是more  没有是nomore
				this.loadingType  = this.askList.length > 12 ? 'nomore' : 'more';
				if(type === 'refresh'){
					if(loading == 1){
						uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
				}
			}, */
			
			result(e){
				console.log('筛选结果',e);
				let filter = e;
				if(e.key === 'subject'){
					this.category_id = e.subject;
					
				}
				
				this.page = 1;
				this.loadData('refresh');
				
				
			},
			//详情
			navToDetailPage(item,url) {
				if(item.id){
					url += '?id='+item.id;
				}
				/* if(item.type === 'ask_editor'){
					url += '?id=' + this.category_id;
					
				} */
				uni.navigateTo({
					url: url
				})
			},
		},
	}
</script>
<style>
/* #ifdef H5 */
.ask_questions{ position: fixed;top:94upx;right:30upx; z-index: 9999;border:#ddd solid 1px; border-radius:40upx;padding: 0upx 20upx;color: #666;}
.ask_search{ position: fixed;top:90upx;left:30upx; z-index: 9999;border:#ddd solid 0px;}
.ask_search .iconfont{font-size:36upx;color: #666;}
/*  #endif */
/*  #ifdef MP */
.ask_questions{ position: fixed;top:14upx;right:30upx; z-index: 9999;border:#ddd solid 1px; border-radius:40upx;padding: 0upx 20upx;color: #666;}
.ask_search{ position: fixed;top:14upx;left:30upx; z-index: 9999;border:#ddd solid 0px;}
.ask_search .iconfont{font-size:36upx;color: #666;}
/*  #endif */
</style>